import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { BellOutline } from 'antd-mobile-icons'
import { Tabs, SideBar, Grid } from 'antd-mobile'
import instance from '../../axios/instance'
import './data.css'
import Table from '../../comdy/table/Index'

function Index() {
  const navigate = useNavigate()


  const [bzData, setBzData] = useState([])
  //对应病症的id
  const [bzDepartmentId, setBzDepartmentId] = useState(null)
  //对应的病症
  const [departList, setDepartList] = useState([])
  // 用于控制 SideBar 默认选中项的索引
  const [activeKey, setActiveKey] = useState(0)

  //常见病症分类
  useEffect(() => {
    instance.get('/health/share/knowledgeBase/v1/findDepartment').then(res => {
      console.log('resbz', res)
      if (res.status === 200) {
        setBzData(res.data.result)
      }
    })
  }, [])

  //对应的病症
  useEffect(() => {
    instance.get('/health/share/knowledgeBase/v1/findDiseaseCategory', {
      params: {
        departmentId: bzDepartmentId
      }
    }).then(res => {
      console.log('resbz1', res)
      if (res.status === 200) {
        setDepartList(res.data.result)
      }
    })
  }, [bzDepartmentId])

  //点击切换病症
  const handelBz = (key) => {
    setActiveKey(key)
    const seleItem = bzData[key]
    if (seleItem) {
      setBzDepartmentId(seleItem.id)
    }
  }

  //常用药品
  const [yaoData, setYaoData] = useState([])
  // 用于控制 SideBar 默认选中项的索引
  const [activeKey2, setActiveKey2] = useState(0)
  //对应病症的id
  const [yaopId, setYaopId] = useState(null)
  const [yaoList, setYaoList] = useState([])

  useEffect(() => {
    instance.get('/health/share/knowledgeBase/v1/findDrugsCategoryList').then(res => {
      console.log('resyp', res)
      if (res.status === 200) {
        setYaoData(res.data.result)
      }
    })
  }, [])

  //对应的常用药品
  const [count, setCount] = useState(100)
  const [page, setPage] = useState(1)
  useEffect(() => {
    instance.get('/health/share/knowledgeBase/v1/findDrugsKnowledgeList', {
      params: {
        drugsCategoryId: yaopId,
        page: page,
        count: count
      }
    }).then(res => {
      console.log('resyaopdy', res)
      if (res.status === 200) {
        setYaoList(res.data.result)
      }
    })
  }, [yaopId, count, page])

  //点击切换药品id
  const handelBz2 = (key) => {
    setActiveKey2(key)
    const seleItem2 = yaoData[key]
    if (seleItem2) {
      setYaopId(seleItem2.id)
    }
  }


  //跳转病症详情
  const handelxq = (id) => {
    console.log(id)
    navigate(`/detail/${id}`)
  }

  //跳转药品详情
  const handeldel=(id)=>{
    console.log(id)
    navigate(`/detail2/${id}`)
  }

  return (
    <div>
      <Table></Table>
      <Tabs>
        <Tabs.Tab title='常见病症' key='1'>
          <div className='container'>
            <div className='side'>
              <SideBar activeKey={activeKey} onChange={handelBz}>
                {bzData.map((item, index) => (
                  <SideBar.Item key={index} title={item.departmentName}
                    style={{ lineHeight: '35px' }} />
                ))}
              </SideBar>
            </div>
            <div className='main'>
              <Grid columns={2} gap={30}>
                {
                  departList.map((item, index) => {
                    return <Grid.Item key={index}>
                      <div onClick={() => handelxq(item.id)}>{item.name}</div>
                    </Grid.Item>
                  })
                }
              </Grid>
            </div>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='常用药品' key='2'>
          <div className='container'>
            <div className='side'>
              <SideBar activeKey={activeKey2} onChange={handelBz2}>
                {yaoData.map((item, index) => (
                  <SideBar.Item key={index} title={item.name}
                    style={{ lineHeight: '35px' }} />
                ))}
              </SideBar>
            </div>
            <div className='main'>
              {
                yaoData.length > 0 ? <Grid columns={2} gap={30}>
                  {
                    yaoList.map((item, index) => {
                      return <Grid.Item key={index}>
                        <div onClick={()=>handeldel(item.id)}>
                          <img src={item.picture}></img>
                          <div>{item.name}</div>
                        </div>
                      </Grid.Item>
                    })
                  }
                </Grid> : ''
              }
            </div>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Index
